<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>文档对比试验</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js">
    </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
    <style type="text/css">
    div {
        width: 100%;
    }
    </style>
</head>

<body>
    <div>
        <h1>文档对比试验</h1>
        <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
    </div>
    <div id="btns">
        <div>
            <br>
            <button onclick="getContent()">创建版本发送到服务器保存</button>
            <button onclick="set_text()">编辑器获取服务器内容</button>
            <button onclick="contrast()">文档与上一版本对比</button>
        </div>
    </div>
    <script type="text/javascript" src='data.js'>
    </script>
    <script type="text/javascript">
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例

    var ue = UE.getEditor('editor', {
        autoHeight: false
    });

    function getContent() {
        var arr = [];
        arr.push("使用editor.getContent()方法可以获得编辑器的内容");
        arr.push("内容为：");
        arr.push(UE.getEditor('editor').getContent());
        alert(arr.join("\n"));
    }

    function set_text(isAppendTo) {
        UE.getEditor('editor').setContent(data.data, isAppendTo);
        alert('调用下载接口!')
    }

    function contrast() {
        var old_data = data.data.replace()
        document.getElementById('baseText').value = data.data.replace(/<.*?>|\。/g, "jxj2991").replace(/&nbsp;|&lt;|&qt;/g, " ").replace(/(jxj2991)+/g, "\n")
        document.getElementById('newText').value = UE.getEditor('editor').getContent().replace(/<.*?>|\。/g, "jxj2991").replace(/&nbsp;|&lt;|&qt;/g, " ").replace(/(jxj2991)+/g, "\n")
        alert('请选择对比显示方法!')

    }
    </script>
    <div>
        <link rel="stylesheet" type="text/css" href="./change/diffview.css">
        <script type="text/javascript" src="./change/diffview.js"></script>
        <script type="text/javascript" src="./change/difflib.js"></script>
        <style type="text/css">
        body {
            font-size: 12px;
            font-family: Sans-Serif;
        }
        
        h2 {
            margin: 0.5em 0 0.1em;
            text-align: center;
        }
        
        .top {
            text-align: center;
        }
        
        .textInput {
            display: block;
            width: 49%;
            float: left;
        }
        
        textarea {
            width: 100%;
            height: 300px;
        }
        
        label:hover {
            text-decoration: underline;
            cursor: pointer;
        }
        
        .spacer {
            margin-left: 10px;
        }
        
        .viewType {
            font-size: 16px;
            clear: both;
            text-align: center;
            padding: 1em;
        }
        
        #diffoutput {
            width: 100%;
        }
        
        .disnone {
            display: none;
        }
        </style>
        <script type="text/javascript">
        function diffUsingJS(viewType) {
            "use strict";
            var byId = function(id) {
                    return document.getElementById(id);
                },
                base = difflib.stringAsLines(byId("baseText").value),
                newtxt = difflib.stringAsLines(byId("newText").value),
                sm = new difflib.SequenceMatcher(base, newtxt),
                opcodes = sm.get_opcodes(),
                diffoutputdiv = byId("diffoutput")

            diffoutputdiv.innerHTML = "";


            diffoutputdiv.appendChild(diffview.buildView({
                baseTextLines: base,
                newTextLines: newtxt,
                opcodes: opcodes,
                baseTextName: "Base Text",
                newTextName: "New Text",
                contextSize: undefined,
                viewType: viewType
            }));
        }
        </script>
        <h1 class="top"><a href="http://github.com/cemerick/jsdifflib">文档对比</a> demo</h1>
        <div class="textInput disnone">
            <h2>旧文本</h2>
            <textarea id="baseText"></textarea>
        </div>
        <div class="textInput spacer disnone">
            <h2>新文本</h2>
            <textarea id="newText"></textarea>
        </div>
        <div class="viewType">
            <input type="radio" name="_viewtype" id="sidebyside" onclick="diffUsingJS(0);">
            <label for="sidebyside">并排比较差异</label>
            &nbsp; &nbsp;
            <input type="radio" name="_viewtype" id="inline" onclick="diffUsingJS(1);">
            <label for="inline">上下比较差异</label>
        </div>
        <div id="diffoutput"></div>
    </div>
</body>

</html>
